<template>
	<view class="container">
		<!-- <view class="bg">
		</view> -->
		<view class="tt">
			<view class="title">维修方式</view>
			<view class="select-tit">
				<!-- <u-radio-group placement="row" v-model="value">
					<u-radio labelSize="17px" labelColor="black" shape="circle" label="到店维修"></u-radio>
					<u-radio labelSize="17px" labelColor="black" shape="circle" label="上门取车"></u-radio>
				</u-radio-group> -->

				<u-radio-group v-model="value1" placement="row" >
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in List" :key="index"
					labelSize="17px" labelColor="black" shape="circle"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>

			</view>
		</view>

		<!-- 客户信息表单 -->
		<view class="form-section">
			<text class="section-title">客户信息</text>
			<view class="form-item">
				<view class="form-label">
					<text class="label-tag">车主姓名</text>
				</view>
				<input class="form-input" v-model="formData.name" placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="label-tag">联系方式</text>
				</view>
				<input class="form-input" v-model="formData.phone" type="number" placeholder="请输入手机号"
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="label-tag">预约时间</text>
				</view>
				<picker mode="date" :value="formData.date" @change="onDateChange" class="form-input">
					<text :class="formData.date ? '' : 'placeholder'">
						{{formData.date || '请选择预约时间'}}
					</text>
				</picker>
			</view>
			<view class="form-item" v-show=" value1!== '到店维修'">
				<view class="form-label">
					<text class="label-tag">服务地址</text>
				</view>
				<input class="form-input" v-model="formData.address" placeholder="请输入地址"
					placeholder-class="placeholder" />
			</view>
		</view>

		<!-- 车辆信息表单 -->
		<view class="form-section">
			<text class="section-title">车辆信息</text>
			<view class="form-item">
				<view class="form-label">
					<text class="label-tag">车辆类型</text>
				</view>
				<picker :range="carTypes" :value="carTypeIndex" @change="onCarTypeChange" class="form-input">
					<text :class="formData.carType ? '' : 'placeholder'">
						{{formData.carType || '请选择车辆类型'}}
					</text>
				</picker>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="label-tag">车牌号</text>
				</view>
				<input class="form-input" v-model="formData.plateNo" placeholder="请输入车牌号"
					placeholder-class="placeholder" />
			</view>
		</view>

		<!-- 图片上传区域 -->
		<view class="form-section">
			<text class="section-title">照片</text>
			<view class="upload-section">
				<text class="upload-title">整车照片：</text>
				<view class="upload-box" @click="chooseImage('car')">
					<image v-if="formData.carImage" :src="formData.carImage" mode="aspectFill" />
					<text v-else class="upload-icon">+</text>
				</view>
			</view>
			<view class="upload-section">
				<text class="upload-title">维修部位照片：</text>
				<view class="upload-box" @click="chooseImage('repair')">
					<image v-if="formData.repairImage" :src="formData.repairImage" mode="aspectFill" />
					<text v-else class="upload-icon">+</text>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @click="submitForm">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'store', // store: 到店维修, door: 上门服务
				carTypes: ['宝马', '路虎', '大众', '奔驰','别克','比亚迪'],
				carTypeIndex: -1,
				formData: {
					name: '',
					phone: '',
					date: '',
					address: '',
					carType: '',
					plateNo: '',
					carImage: '',
					repairImage: ''
				},
				List:[{
					name:'到店维修',
					disable:false
				},
				{
					name:'上门取件',
					disable:false
				}],
				value1:"上门取件"
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			selectType(type) {
				this.type = type
			},
			onDateChange(e) {
				this.formData.date = e.detail.value
			},
			onCarTypeChange(e) {
				this.carTypeIndex = e.detail.value
				this.formData.carType = this.carTypes[e.detail.value]
			},
			async chooseImage(type) {
				try {
					const res = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera']
					})
					if (type === 'car') {
						this.formData.carImage = res.tempFilePaths[0]
					} else {
						this.formData.repairImage = res.tempFilePaths[0]
					}
				} catch (e) {
					console.error(e)
				}
			},
			submitForm() {
				// 表单验证
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				// 提交表单
				console.log('提交表单', this.formData)
				uni.showToast({
					title: '提交成功'
				})
				// 跳转页面
				uni.navigateTo({
					url:'/pages/lly/yuyuesuccess/yuyuesuccess'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}

	// .bg {
	// 	width: 100%;
	// 	height: 300rpx;
	// 	background-color: #3385FD;
	// 	position: relative;
	// 	position: absolute;
	// 	top: -20rpx;
	// 	z-index: 0;
	// }

	.tt {
		width: 700rpx;
		height: 100rpx;
		margin: 20rpx;
		// padding: 0 30rpx 0 -30rpx;
		border-radius: 20rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-content: center;
		line-height: 100rpx;
		background-color: white;
		font-size: 34rpx;
		font-weight: 500;
	}

	.title {
		// float: left;
		// width: 200rpx;
		height: 100%;
		// background-color: cadetblue;
	}

	.select-tit {
		// float: right;
		padding-top: 35rpx;
		// background-color: burlywood;

	}

	.form-section {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		// position: absolute;
		// top: -20rpx;

		.section-title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f5f5f5;

		.form-label {
			width: 180rpx;

			.label-tag {
				background-color: #e8f3ff;
				color: #1989fa;
				padding: 8rpx 20rpx;
				border-radius: 30rpx;
				font-size: 28rpx;
			}
		}

		.form-input {
			flex: 1;
			height: 60rpx;
			font-size: 28rpx;
		}
	}

	.placeholder {
		color: #999999;
	}

	.upload-section {
		margin-top: 20rpx;

		.upload-title {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 20rpx;
		}

		.upload-box {
			width: 200rpx;
			height: 200rpx;
			border: 2rpx dashed #dddddd;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}

			.upload-icon {
				font-size: 60rpx;
				color: #999999;
			}
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #1989fa;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		border-radius: 50rpx;
	}
</style>